<template>
  <div id="graph">graph</div>
</template>

<script setup lang="ts">
import { Graph, Cell } from '@antv/x6'
import { register } from '@antv/x6-vue-shape'
import Node from './node.vue'
register({
  shape: 'custom-node',

  // ports: { ...ports },
  component: Node,
})

const data: any = [
  {
    id: '1',
    shape: 'event',
    width: 40,
    height: 40,
    position: {
      x: 50,
      y: 180,
    },
  },
  {
    id: '2',
    shape: 'activity',
    width: 100,
    height: 60,
    position: {
      x: 20,
      y: 280,
    },
    label: '请假申请请假申请请假申请请假申请请假申请',
  },
  {
    id: '3',
    shape: 'bpmn-edge',
    source: '1',
    target: '2',
  },
  {
    id: '4',
    shape: 'gateway',
    width: 55,
    height: 55,
    position: {
      x: 170,
      y: 282.5,
    },
  },
  {
    id: '5',
    shape: 'bpmn-edge',
    source: '2',
    target: '4',
  },
  {
    id: '6',
    shape: 'activity',
    width: 100,
    height: 60,
    position: {
      x: 300,
      y: 240,
    },
    label: '领导审批',
  },
  {
    id: '7',
    shape: 'activity',
    width: 100,
    height: 60,
    position: {
      x: 300,
      y: 320,
    },
    label: '人事审批',
  },
  {
    id: '8',
    shape: 'bpmn-edge',
    source: '4',
    target: '6',
  },
  {
    id: '9',
    shape: 'bpmn-edge',
    source: '4',
    target: '7',
  },
  {
    id: '10',
    shape: 'gateway',
    width: 55,
    height: 55,
    position: {
      x: 460,
      y: 282.5,
    },
  },
  {
    id: '11',
    shape: 'bpmn-edge',
    source: '6',
    target: '10',
  },
  {
    id: '12',
    shape: 'bpmn-edge',
    source: '7',
    target: '10',
  },
  {
    id: '13',
    shape: 'activity',
    width: 100,
    height: 60,
    position: {
      x: 560,
      y: 280,
    },
    label: '人事审批',
  },
  {
    id: '14',
    shape: 'bpmn-edge',
    source: '10',
    target: '13',
  },
  {
    id: '15',
    shape: 'event',
    width: 40,
    height: 40,
    position: {
      x: 710,
      y: 290,
    },
    attrs: {
      body: {
        strokeWidth: 4,
      },
    },
  },
  {
    id: '16',
    shape: 'bpmn-edge',
    source: '13',
    target: '15',
  },
]

onMounted(() => {
  const graph = new Graph({
    container: document.getElementById('graph')!,
    autoResize: true,
    background: {
      color: '#F2F7FA',
    },
    connecting: {
      router: 'orth',
    },
    interacting: {
      nodeMovable: false,
    },
  })
  const node1 = graph.addNode({
    shape: 'custom-node', // 指定使用自定义节点Vue图形
    zIndex: 2, // 节点层级设置为2 连线层级设置为1
    data: { name: '这里存入你想要存入的任何数据' }, // 这里存入你想要存入的任何数据 或者存入attr
    x: 10,
    y: 10,
    width: 100,
    height: 100,
  })
  const node2 = graph.addNode({
    shape: 'custom-node', // 指定使用自定义节点Vue图形
    zIndex: 2, // 节点层级设置为2 连线层级设置为1
    data: { name: '指定使用自定义节点Vue图形' }, // 这里存入你想要存入的任何数据 或者存入attr
    x: 100,
    y: 100,
  })
  graph.addEdge({
    source: node1,
    target: node2,
  })
  graph.on('render:done', () => {
    // const cells: Cell[] = []
    // cells.push(
    //   graph.createEdge({
    //     id: '12',
    //     // shape: 'bpmn-edge',
    //     source: node1.id,
    //     target: node2.id,
    //   })
    // )
    // data.forEach((item: any) => {
    //   if (item.shape === 'bpmn-edge') {
    //     cells.push(graph.createEdge(item))
    //   } else {
    //     cells.push(graph.createNode(item))
    //   }
    // })
    // graph.resetCells(cells)
    graph.zoomToFit({ padding: 10, maxScale: 1 })
    graph.centerContent()
  })
})
</script>

<style scoped lang="scss">
#graph {
  width: 100%;
  height: 100%;
}
</style>
